Ext.define('BookmarkIt.view.bookmarkViewPanel', {
	extend : 'Ext.Panel',
	alias : 'widget.viewPanel',
	id : 'images-view',
	autoScroll : true,
	bodyBorder : true,
	initComponent : function() {
		var store = Ext.getStore('BookmarkIt.store.localBookmarks');
		
		this.tbar = Ext.create('Ext.Container',{
			
			border:true,
			autoShow:true,
			style:{
				'background-color':'rgb(50, 101, 156)',
				'border-radius':'6px 6px 0px 0px'
			},
			layout : {
				type : 'hbox',
				align : 'middle'
			},
			items:[ {
				xtype : 'folderView'
			},{
				xtype: 'tbfill'
			},{
				xtype : 'button',
				text : 'Add Folder',
				id : 'addFolderButton',
				margin:2,
				handler:function(button){
					window.controller.onFolderAddClick();
				}
			},{
				xtype : 'button',
				text : 'Edit',
				id : 'editButton',
				margin:2,
				handler:function(button){
					window.controller.editBookmark();
				}
			}, {
				xtype: 'button',
				text: 'Sort',
				id : 'sortButton',
				margin:2,
			    menu: new Ext.menu.Menu({
			        items: [
				        {xtype:'button',toggleGroup:'sorters',text: 'No sort', handler: function(){
                            store.sorters.clear();
                            Ext.getCmp('sortButton').removeCls('sortEnabled');

                        }},
                        {xtype:'button',toggleGroup:'sorters',text: 'By title', handler: function(){
                            store.sort('title');
                            Ext.getCmp('sortButton').addCls('sortEnabled');
			            }},
			            {xtype:'button',toggleGroup:'sorters',text: 'By date', handler: function(){
                            store.sort('date');
                            Ext.getCmp('sortButton').addCls('sortEnabled');
			            }}
			        ]
			    })
			}]
		});
		this.callParent(arguments);
	},
	items : [ {
		xtype : 'bookmarkView'
	} ]
});